<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <!-- 主题样式文件 -->
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
    <!-- 主题的图片文件 -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
    <!-- 主题的颜色-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
    <!-- 依赖的jquery -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
    <!-- 插件的集合 -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
    <!-- 国际化文件 -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        $(function () {
            /*定义菜单树  */
            $('#menuTree').tree({
                url: '${pageContext.request.contextPath}/json/menu_tree.json',
                method: "get",
                onClick: function (node) {
                    //node  我们可以获取的所有点击内容的数据
                    //1.得到选项卡的名字
                    var nodeTitle = node.text;
                    //获取到点击事件的路径
                    var nodeUrl = node.url;
                    //2.需要看一下这个选卡的名字是否存在，如果存在的话，就打开，如果不存在，才创建
                    var tab = $("#mainTab").tabs("getTab", nodeTitle);
                    if (tab) {
                        $("#mainTab").tabs("select", nodeTitle);
                    } else {
                        $('#mainTab').tabs('add', {
                            title: nodeTitle,
                            /* content: '<iframe frameborder="0" style="width:100%;height:100%" src="'+nodeUrl+'"></iframe>', */
                            content: '<iframe frameborder="0" style="width:100%;height:100%" src="' + nodeUrl + '"></iframe>',
                            closable: true//允许自己去关闭
                        });
                    }
                }


            });
        })

    </script>


</head>
<body class="easyui-layout">
<div data-options="region:'north'" style="height: 100px;">
    <div style="display: flex;justify-content: space-between">
        <div style="height: 100px;">
            <img src="${pageContext.request.contextPath}/images/logo/logo.png" alt="" style="height: 100%">
        </div>
        <div style="height: 100px;display: flex;justify-content: space-between">
            <div style="margin-right: 5px;">
                <img src="${avatar}" alt="" style="margin-top: 24px;border-radius: 50%">
            </div>
            <div style="line-height: 100px">
                <span style="margin-right: 5px;">${USER_NAME}</span>
                <a class="easyui-linkbutton" href="loginout">退出</a>
            </div>
        </div>
    </div>

</div>
<div data-options="region:'west',title:'菜单',split:true"
     style="width: 200px;">
    <ul id="menuTree"></ul>
</div>
<!-- 主页的内容 -->
<div id="mainTab" data-options="region:'center'" class="easyui-tabs"
     style="background: #eee;">
    <div title="欢迎页面" style="padding: 20px; display: none;">
        <div style="margin: 100px auto; text-align: center">
            <h2>欢迎来到希希书城管理界面</h2>
            <img src="${pageContext.request.contextPath}/images/logo/banner.png" alt="">
        </div>
    </div>

</div>
</body>

</html>
